<template>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-page-header content="用户详情" @back="$router.back()" />
    </el-card>
    <el-card class="mt-4 !border-none" header="基本资料" shadow="never">
      <el-form
        ref="formRef"
        class="ls-form"
        :model="formData"
        label-width="120px"
      >
        <div class="bg-page py-5 pl-20 mb-10">
          <div class="mb-3 text-tx-regular">用户头像</div>
          <el-avatar :src="formData.avatar" :size="58" />
        </div>
        <el-form-item label="用户编号："> {{ formData.sn }} </el-form-item>
        <el-form-item label="用户昵称：">
          {{ formData.nickname }}
        </el-form-item>
        <el-form-item label="账号：">
          {{ formData.username }}
          <!-- <popover-input
                        class="ml-[10px]"
                        :limit="32"
                        @confirm="handleEdit($event, 'username')"
                    >
                        <el-button type="primary" link v-perms="['user:edit']">
                            <icon name="el-icon-EditPen" />
                        </el-button>
                    </popover-input> -->
        </el-form-item>
        <el-form-item label="真实姓名：">
          {{ formData.realName || "-" }}
          <popover-input
            class="ml-[10px]"
            :limit="32"
            @confirm="handleEdit($event, 'realName')"
          >
            <el-button type="primary" link v-perms="['user:edit']">
              <icon name="el-icon-EditPen" />
            </el-button>
          </popover-input>
        </el-form-item>
        <el-form-item label="性别：">
          {{ formData.sex }}
          <popover-input
            class="ml-[10px]"
            type="select"
            :options="[
              {
                label: '未知',
                value: 0,
              },
              {
                label: '男',
                value: 1,
              },
              {
                label: '女',
                value: 2,
              },
            ]"
            @confirm="handleEdit($event, 'sex')"
          >
            <el-button type="primary" link v-perms="['user:edit']">
              <icon name="el-icon-EditPen" />
            </el-button>
          </popover-input>
        </el-form-item>
        <el-form-item label="联系电话：">
          {{ formData.mobile || "-" }}
          <popover-input
            class="ml-[10px]"
            type="number"
            @confirm="handleEdit($event, 'mobile')"
          >
            <el-button type="primary" link v-perms="['user:edit']">
              <icon name="el-icon-EditPen" />
            </el-button>
          </popover-input>
        </el-form-item>
        <el-form-item label="注册来源："> {{ formData.channel }} </el-form-item>
        <el-form-item label="是否管理员：">
          {{ formData.isAdmin ? "是" : "否" }}
          <popover-input
            class="ml-[10px]"
            type="select"
            :options="[
              {
                label: '否',
                value: 0,
              },
              {
                label: '是',
                value: 1,
              },
            ]"
            @confirm="handleEdit($event, 'isAdmin')"
          >
            <el-button type="primary" link v-perms="['user:edit']">
              <icon name="el-icon-EditPen" />
            </el-button>
          </popover-input>
        </el-form-item>
        <el-form-item label="是否冻结：">
          {{ formData.isDisable ? "是" : "否" }}
          <popover-input
            class="ml-[10px]"
            type="select"
            :options="[
              {
                label: '否',
                value: 0,
              },
              {
                label: '是',
                value: 1,
              },
            ]"
            @confirm="handleEdit($event, 'isDisable')"
          >
            <el-button type="primary" link v-perms="['user:edit']">
              <icon name="el-icon-EditPen" />
            </el-button>
          </popover-input>
        </el-form-item>
        <el-form-item label="注册时间：">
          {{ formData.createTime }}
        </el-form-item>
        <el-form-item label="最近登录时间：">
          {{ formData.lastLoginTime }}
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="consumerDetail">
import type { FormInstance } from "element-plus";
import { getUserDetail, userEdit } from "@/api/consumer";
import feedback from "@/utils/feedback";
import { isEmpty } from "@/utils/util";

const route = useRoute();
const formData = reactive({
  avatar: "",
  channel: "",
  createTime: "",
  lastLoginIp: "",
  lastLoginTime: "",
  mobile: "",
  nickname: "",
  realName: 0,
  sex: 0,
  sn: "",
  username: "",
  isAdmin: 0,
  isDisable: 0,
});

const formRef = shallowRef<FormInstance>();

const getDetails = async () => {
  const data = await getUserDetail({
    id: route.query.id,
  });
  Object.keys(formData).forEach((key) => {
    //@ts-ignore
    formData[key] = data[key];
  });
  console.log("🚀 ~ file: detail.vue:136 ~ formData:", formData);
};

const handleEdit = async (value: string | number | boolean, field: string) => {
  console.log("🚀 ~ file: detail.vue:143 ~ value:", value);
  if (field === "isAdmin") {
    value = value ? 1 : 0;
  }
  if (isEmpty(value)) return;
  await userEdit({
    id: route.query.id,
    field,
    value,
  });
  feedback.msgSuccess("编辑成功");
  getDetails();
};

getDetails();
</script>
